<template>
  <basic-container>
    <avue-crud v-model="form" :search.sync="search" v-bind="bindVal" :page.sync="page" :before-open="beforeOpen" v-on="onEvent">
      <template slot="caseReasonSearch" slot-scope="{}">
        <avue-select v-model="search.caseReasonId" :dic="dic" :props="props" placeholder="请选择内容" type="tree" />
      </template>
      <template slot="archivesQuestionsListForm" slot-scope="{value}">
        <div class="wrap">
          <div v-for="(item,index) in value" :key="index" class="list-border">
            <div class="changjian_border_quest">
              <p :class="{'gexing_style2' : item.type == 0}" class="gexing_style" @click="changType(index)">{{ item.type == 0 ? '共性' : '个性' }}
                <i class="el-icon-sort" />
              </p>
              <span style="color:#001E9E">问：</span>
              <el-input v-model="item.question" placeholder="请输入问题" clearable size="small" />
              <i class="el-icon-delete" style="cursor: pointer;" @click="delQuestionItem(index)" />
            </div>
            <div class="changjian_border_quest">
              <span style="color:#11A144">答：</span>
              <el-input v-model="item.answer" placeholder="请输入回答" clearable size="small" />
            </div>
          </div>
          <div class="addQuestion" @click="addNextBtn()">
            <i class="el-icon-plus" />
            添加下一个问题
          </div>
        </div>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
export default window.$crudCommon(
  {
    data() {
      return {
        search: {},
        props: {
          label: 'caseReason',
          value: 'caseReasonId'
        },
        dic: []
      }
    },
    methods: {
      listAfter(result) {
        result.forEach((item) => {
          if (!item.archivesQuestionsList.length) {
            item.archivesQuestionsList.push({
              type: 0,
              question: '',
              answer: '',
              sortCode: item.archivesQuestionsList.length,
              temId: item.templateId
            })
          }
        })
        this.data = result
      },
      addNextBtn() {
        console.log(this.form)
        const list = this.form.archivesQuestionsList
        for (let y = 0; y < list.length; y++) {
          if (list[y].question == '' || list[y].answer == '') {
            return this.$message.error('请填写问答内容')
          }
        }
        this.form.archivesQuestionsList.push({
          type: 0,
          question: '',
          answer: '',
          sortCode: list.length,
          temId: this.form.templateId
        })
      },
      delQuestionItem(index) {
        if (this.form.archivesQuestionsList.length == 1) {
          return this.$message({
            type: 'warning',
            message: '至少保留一个问答!'
          })
        }
        this.form.archivesQuestionsList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      },
      beforeOpen(done, type) {
        if (type == 'add') {
          this.form = {}
          this.form.archivesQuestionsList = [
            {
              type: 0,
              question: '',
              answer: '',
              sortCode: 0,
              temId: this.form.templateId
            }
          ]
        }
        done()
      },
      changType(index) {
        const type = this.form.archivesQuestionsList[index].type
        console.log(type ? 0 : 1)
        this.form.archivesQuestionsList[index].type = type == 0 ? 1 : 0
        console.log(this.form.archivesQuestionsList)
      }
    }
  },
  {
    name: 'archives/tem',
    data: 'rows',
    rowKey: 'templateId'
  }
)
</script>
<style lang="scss">
.avue-dialog {
  &.avue-crud__dialog {
    .el-dialog {
      margin-top: 9vh !important;
      &.tem-dialog {
        .el-dialog__body {
          max-height: 500px;
        }
      }
    }
  }
}
</style>
<style scoped lang="scss">
::v-deep .list-border {
  .el-input__inner {
    border: none;
  }
}
.wrap {
  position: relative;
  .bians {
    width: 100%;
    position: absolute;
    // bottom: 0;
    z-index: 10;
    line-height: 46px;
    text-align: center;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    box-sizing: border-box;
    color: #005ff5;
  }
}
.list-border {
  width: 100%;
  height: 92px;
  border: 1px solid #e6e6e6;
  box-sizing: border-box;
  margin-top: 10px;
  > div {
    height: 45px;
  }
  .changjian_border_quest {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    position: relative;
    padding-left: 74px;
    padding-right: 20px;
    box-sizing: border-box;
    .gexing_style {
      position: absolute;
      left: 9px;
      display: inline-block;
      width: auto;
      height: 21px;
      background: RGB(0, 30, 158, 0.2);
      line-height: 21px;
      border-radius: 3px;
      cursor: pointer;
      color: #001e9e;
      padding: 0px 6px;
      box-sizing: border-box;
      > i {
        transform: rotate(90deg);
      }
    }
    .gexing_style2 {
      color: #1a985b;
      background: RGB(26, 152, 91, 0.2);
    }
  }
}
.addQuestion {
  width: 100%;
  line-height: 46px;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  border-left: 1px solid #e6e6e6;
  box-sizing: border-box;
  color: #001e9e;
  cursor: pointer;
}
</style>
